<!--  -->
<template>
  <div class="content">
    <div class="search-goods flex-j-sb" v-if="goodsData.length > 0">
      <block v-for="(item, index) in goodsData" :key="index">
        <div class="goods-item flex" @click="goodsNav(item.goods_id)">
          <div class="goods-img">
            <div class="label" v-if="item.is_free">霸王餐</div>
            <div class="label label-store" v-else-if="item.is_stock_warn">即将售罄</div>
            <div class="label label-store" v-else-if="item.is_comming_soon">即将开售</div>
            <div class="label label-store" v-else-if="item.is_end">即将停售</div>
            <div class="label" v-else-if="item.is_many_store">多店通用</div>
            <van-image width="10.7813rem" height="10.7813rem" radius="0.4688rem 0.4688rem 0 0" :src="item.thumb" />
            <div class="flex-j-sb store-name">
              <div class="label-left pl" v-if="discountList.includes('10')"><span class="iconfont icon-service_n"></span>{{ item.store_name }}</div>
              <div class="units" v-if="discountList.includes('9')">{{ item.distance | kmUnit }}</div>
            </div>
          </div>

          <div class="goods-name flex-a-c">
            <div class="goods-title" v-if="discountList.includes('1')">
              <span class="store-label orange" v-if="item.is_free">霸王餐</span>
              <span class="store-label yellow" v-else-if="item.is_self">自营</span>
              <span class="store-label blue" v-else>新品</span>
              <span class="dishes">{{ item.title }}</span>
            </div>
          </div>
          <div class="flex packet-red flex-j-sb">
            <div class="consumer-price">
              <span v-if="discountList.includes('2')" :style="{ color: decoration.money_font_color }"
                >¥<span class="number" :style="{ color: decoration.money_font_color }">{{ item.price | toFix }}</span>
                <span class="float"></span>
              </span>
              <span class="consumer" :style="{ color: decoration.font_color }" v-if="discountList.includes('3')">消费券</span>
            </div>
            <div>
              <span class="packet" v-if="item.reward_love && discountList.includes('8')">{{ love }}{{ item.reward_love }}</span>
              <span class="packet" v-else-if="item.reward_point && discountList.includes('7')">{{ point }}{{ item.reward_point }}</span>
            </div>
          </div>
          <div class="flex-j-sb counter-price">
            <div v-if="item.offline_price !== '0.00'" class="flex-a-c">
              <div v-if="discountList.includes('5')" class="counter flex" :style="{ backgroundColor: decoration.shop_pay_bg_color, color: decoration.shop_pay_font_color }">
                到店付
              </div>
              <span class="price" :style="{ color: decoration.shop_pay_money_color }" v-if="discountList.includes('4')">¥{{ item.offline_price | toFix }}</span>
            </div>
            <span class="counter-right" v-if="discountList.includes('6')"
              >门市价 <span class="rack-rate">¥{{ item.offline_cost_price | toFix }}</span></span
            >
          </div>
          <div class="fine-food flex-j-sb flex-a-c">
            <div class="fine" v-if="discountList.includes('11')">{{ item.category_name }}</div>
            <div class="number" v-if="discountList.includes('12')">已售{{ item.show_sales }}</div>
          </div>
        </div>
      </block>
    </div>
    <van-empty description="空空如也" v-else />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Image as VanImage } from "vant";
export default {
  name: "",
  components: {
    VanImage
  },
  props: {
    goodsData: {
      type: Array,
      default: null
    },
    decoration: {
      type: null
    },
    love: {
      type: null
    },
    point: {
      type: null
    }
  },
  data() {
    return {};
  },
  filters: {
    kmUnit(value) {
      let v;
      if (typeof value === "number" && !isNaN(value)) {
        if (value >= 1000) {
          v = (value / 1000).toFixed(2) + "km";
        } else {
          v = value + "m";
        }
      } else {
        v = "0m";
      }
      return v;
    },
    toFix(value) {
      if (!value) return "0.00";
      value = parseFloat(value);
      return isNaN(value) && value <= 0 ? 0 : parseFloat(value);
    }
  },

  //监听属性 类似于data概念
  computed: {
    // goodsDataList() {
    //   if (this.decoration.num_set === "2") {
    //     let arr = this.goodsData.filter((item, index) => {
    //       return this.decoration.get_number > index;
    //     });
    //     return arr;
    //   } else {
    //     return this.goodsData;
    //   }
    // }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goodsNav(goodsId) {
      this.$router.push(this.fun.getUrl("goodsDetails", {}, { goodsId: goodsId }));
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.discountList = this.decoration["discount_list"];
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.search-goods {
  height: 100%;
  flex-wrap: wrap;
  margin: 0 0.625rem;
  padding: 0.625rem 0 0 0;
}

.yellow {
  background-color: #ffb536;
  margin-right: 0.2813rem;
}

/* 单行文本的溢出显示省略号 */

.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数 */
  overflow: hidden;
}

.goods-item {
  width: 10.7813rem;
  background-color: #fff;
  border-radius: 30rpx;
  flex-direction: column;
  padding: 0 0 0.625rem 0;
  margin-bottom: 0.625rem;
  border-radius: 0.4688rem 0.4688rem 0 0;

  .goods-img {
    width: 10.7813rem;
    height: 10.7813rem;
    border-radius: 0.4688rem 0.4688rem 0 0;
    position: relative;
    background-color: transparent;
  }
}

.goods-img {
  .label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    font-size: 0.75rem;
    color: #fff;
    background: linear-gradient(90deg, #ff6a3f 0%, #ff3b01 100%);
    padding: 0.125rem 0.5938rem;
    border-radius: 0.4688rem 0 0.4688rem 0;
  }

  .label-store {
    background: linear-gradient(90deg, #ff963d 0%, #fc6703 100%);
  }

  .store-name {
    width: 100%;
    height: 1.6563rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.3);
    align-items: center;
    font-size: 0.6875rem;
    color: #fff;
  }
}

.store-name {
  .icon-service_n {
    color: #fff;
    font-size: 0.6875rem;
  }

  .units {
    margin-right: 0.25rem;
  }
}

.goods-name {
  margin: 0.625rem 0.4688rem 0.7188rem 0.4688rem;

  .store-label {
    font-size: 0.625rem;
    color: #fff;
    padding: 0.25rem 0.3438rem;
    border-radius: 0.3125rem;
    margin-right: 0.5313rem;
  }

  .goods-title {
    font-size: 0.8125rem;
    color: #35314a;
  }

  .dishes {
    line-height: 1.5625rem;
    font-size: 0.8125rem;
    color: #35314a;
  }
}

.blue {
  background-color: #2aa2ff;
}

/* 消费红包 */

.packet-red {
  margin: 0 0.4688rem 0 0.4375rem;
  align-items: flex-end;
  flex-wrap: wrap;

  /* justify-content: flex-end; */
}

.packet {
  text-align: center;
  display: inline;
  font-size: 0.625rem;
  color: #ff3a00;
  border: 0.0625rem solid #ff3a00;
  padding: 0.2188rem 0.25rem 0.1563rem 0.25rem;
  border-radius: 0.1563rem;
}

/* 消费券 */

.consumer-price {
  color: #ff3a00;
  font-size: 0.6875rem;
  margin-left: 0.4375rem;

  .float {
    font-size: 0.8125rem;
  }

  .number {
    font-size: 1.125rem;
  }

  .consumer {
    font-size: 0.625rem;
    margin-left: 0.3125rem;
  }
}

.unit-price {
  font-size: 0.6875rem;
  color: #ff3a00;
}

.label-left {
  width: 65%;
  text-align: left;
}

.orange {
  background-color: #ff2c00;
}

.goods-sold {
  margin: 0 1.0938rem 0 0.4375rem;
  align-items: flex-end;
}

.unit-price .number {
  font-size: 1.3125rem;
  font-size: 54.16rpx;
}

.sold-out {
  font-size: 0.625rem;
  color: #b5b5b5;
  margin-bottom: 0.4688rem;
}

/* 到店付 */

.counter-price {
  margin: 0.9375rem 0.4375rem 0 0.4375rem;
  align-items: center;
  flex-wrap: wrap;
}

.counter {
  font-size: 0.625rem;
  color: #fff;
  background-color: #ff4000;
  padding: 0.1563rem 0.25rem 0.1563rem 0.1563rem;
  border-radius: 0.1563rem;
}

.counter-price {
  .price {
    font-size: 0.9375rem;
    color: #ff3a00;
    margin-left: 0.3125rem;
  }

  .counter-right {
    color: #686868;
    font-size: 0.6875rem;
  }
}

.rack-rate {
  font-size: 0.75rem;
  text-decoration-line: line-through;
}

.fine-food {
  margin: 0.625rem 0.625rem 0 0.625rem;
}

.fine {
  font-size: 0.625rem;
  color: #9aa4bf;
  padding: 0.2188rem 0.3438rem 0.1875rem 0.3125rem;
  background-color: #f2f6f9;
}

.fine-food .number {
  font-size: 0.625rem;
  color: #b5b5b5;
}
</style>
